<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts" setup>
  import { onMounted, ref, Ref } from 'vue';
  import { useECharts } from '@/hooks/web/useECharts';
  import { basicProps } from './props';

  const props = defineProps({
    ...basicProps,
    list: {
      type: Array,
      default: () => [],
    },
    xyTitle: {
      type: Object,
      default: () => {},
    },
  });
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

  onMounted(() => {
    let analysisData = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            width: 1,
            color: '#019680',
          },
        },
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        name: '销量',
        data: [],
        splitLine: {
          show: true,
          lineStyle: {
            width: 1,
            type: 'line',
            color: 'rgba(226,226,226,0.5)',
          },
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: [
        {
          type: 'value',
          name: '销售数量',
          axisTick: {
            // show: false,
          },
        },
      ],
      grid: { left: '1%', right: '1%', top: '2%', bottom: '1%', containLabel: true },
      series: [],
    };
    // X轴
    // analysisData.xAxis[0].data = [0,1,2,3,4,5,6,100000]
    // Y轴
    // console.log('listlistlistlistlist', props.list.value[0].date);
    const colorList = [
      '#dd6b66',
      '#759aa0',
      '#e69d87',
      '#8dc1a9',
      '#ea7e53',
      '#eedd78',
      '#73a373',
      '#73b9bc',
      '#7289ab',
      '#91ca8c',
      '#f49f42',
    ];
    props.list.value.forEach((item) => {
      analysisData.xAxis.data.push(item[props.xyTitle.xName]);
    });

    props.xyTitle.numberLine.forEach((element, index) => {
      analysisData.series.push({
        smooth: true,
        data: [],
        name: '',
        type: 'line',
        itemStyle: {
          color: colorList[index],
        },
      });
      props.list.value.forEach((item) => {
        analysisData.series[index]['data'].push(item[element]);
        analysisData.series[index]['name'] = props.xyTitle.chineseName[index];
      });
    });
    console.log('analysisDataanalysisDataanalysisData', analysisData);

    setOptions(analysisData);
  });
</script>
